<template>
  <view>
    <canvas canvas-id="GtopTvWEDzCUFFxvJGzjGbIFZLFiIjFI" id="GtopTvWEDzCUFFxvJGzjGbIFZLFiIjFI" class="charts" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"/>
  </view>
</template>

<script>
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
import getDateTime from '@/common/getdateTime.js';
var _self;
var canvaLineA=null;
var canvaLineB=null;
var lastMoveTime2=null;
var lastMoveTime=null;//最后执行移动的时间戳
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 750,
      cHeight: 500,
	  pixelRatio:1,
	  itemCount:4,
	  tempAxis:[],
	  tempAxis2:[],
	  yAxis1:[],
	  yAxis2:[],
	  yAxis3:[],
	  loadingA:'',
	  loadingB:'',
	  wellId:'',
	  allTags:[],
	  allTagsMap:[],
	  startDate:'',
	  endDate:'',
	  timer:'',
    };
  },
  onLoad(option) {
	_self = this;
	  //这里的 750 对应 css .charts 的 width
	this.cWidth = uni.upx2px(750);
	  //这里的 500 对应 css .charts 的 height
	this.cHeight = uni.upx2px(500);
  	this.wellId=option.well_id;
  	this.getServerData(option.well_id);
  	//this.timer1();
  },
  onReady() {
   
  },
  methods: {
	  //定时器每5秒刷新一下
	  timer1(){
	  	//console.log(this.wellId);
	  	this.timer = setInterval(() => {
	  	    this.getServerData(this.wellId) 
	  	}, 30000);
	  
	  },
    //井口油压，井口套压，阀后压力
    getServerData(wellId){
    	console.log(this.wellId);
    	//获取tag
    	//let url2='http://127.0.0.1:9011/zsgl/wellCurve/allTags/'+this.wellId;
    	let url2=this.$requestUrl.requestUrl('/zs')+'/zsgl/wellCurve/allTags/'+this.wellId;
    	uni.request({
    		url:url2,
    		data:{},
    		success: (ruf) => {
    			//console.log(ruf);
    			let allTags = [];
    			let allTagsMap = new Map();
    			// 收集所有油压、套压、阀后压力 tag
    			// 1:瞬量 2:阀后压力 3:油压 4:套压 5:温度 6:节流后温度 9:进气压力 10: 排气压力
    			// 排除7:孔板阀计量昨日类 因为这个需要按天数来 单独使用
    			for (let i = 0; i < ruf.data.length ; i++) {
    			  if(ruf.data[i].px == 2 || ruf.data[i].px == 3 || ruf.data[i].px == 4){
    			    //console.log(ruf.data[i].tag);
    				allTags.push(ruf.data[i].tag);
    			    allTagsMap.set(ruf.data[i].tag, ruf.data[i].px);
    			  }
    			}
    			this.allTags = allTags;
    			this.allTagsMap = allTagsMap;
    			let t=(new Date().getTime()- 24 * 60 * 60 * 1000).toFixed();
    			let tend=new Date().getTime().toFixed();
    			this.startDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(t)));
    			this.endDate=getDateTime.dateTimeStr('y-m-d h:i:s',new Date(Number(tend)));
    			var step = "30S";
    			let tagUrl = this.$requestUrl.requestUrl('/pi')+'/queryservice/queryInterpolatedValues2?tagNames='
    						 + this.allTags + "&startDate=" + this.startDate +
    						 "&endDate=" + this.endDate + "&step=" + step;
    			uni.request({
    				url: tagUrl,
    				data:{
    				},
    				success: function(resp) {
    					console.log("第二层");
    					var data=resp.data.data;
    					/* console.log(data);
    						console.log(allTags); */
    					for (let i = 0; i <_self.allTags.length ; i++) {
    			                    // 取得数组里的每个tag
    								//console.log("vvvvvv");
    			                    let tag = _self.allTags[i];
    			                    // 计算一次X轴所有坐标
    			                      if(data[tag]){
    			                        let xAxis = [];
    			                        for (let j = 0; j < data[tag].length ; j++) {
    			                          xAxis.push(data[tag][j].time);
    			                        }
    			                        _self.tempAxis = xAxis;
    			                      }
    			
    			                    // 如果tag存在
    			                    if(data[tag]){
    			                      // 瞬量
    			                      if(_self.allTagsMap.get(tag) == 1){
    			                        let yAxis = [];
    			                        for (let j = 0; j < data[tag].length ; j++) {
    			                          if(data[tag][j].value == null){
    			                            yAxis.push(null);
    			                          }
    			                          else{
    			                            yAxis.push(data[tag][j].value.toFixed(2));
    			                          }
    			
    			                        }
    			                        //_self.yAxis1 = yAxis;
    			                      }
    			                      // 阀后压力
    			                      else if (_self.allTagsMap.get(tag) == 2){
    			                        let yAxis = [];
    			                        for (let j = 0; j < data[tag].length ; j++) {
    			                          if(data[tag][j].value == null){
    			                            yAxis.push(null);
    			                          }
    			                          else{
    			                            yAxis.push(data[tag][j].value.toFixed(2));
    			                          }
    			
    			                        }
    									
    			                        _self.yAxis3 = yAxis;
    			                      }
    			                      // 油压
    			                      else if (_self.allTagsMap.get(tag) == 3){
    			                        let yAxis = [];
    			                        for (let j = 0; j < data[tag].length ; j++) {
    			                          if(data[tag][j].value == null){
    			                            yAxis.push(null);
    			                          }
    			                          else{
    			                            yAxis.push(data[tag][j].value.toFixed(2));
    			                          }
    			
    			                        }
    			                        _self.yAxis1 = yAxis;
    			                      }
    			                      // 套压
    			                      else if (_self.allTagsMap.get(tag) == 4){
    			                        let yAxis = [];
    			                        for (let j = 0; j < data[tag].length ; j++) {
    			                          if(data[tag][j].value == null){
    			                            yAxis.push(null);
    			                          }
    			                          else{
    			                            yAxis.push(data[tag][j].value.toFixed(2));
    			                          }
    			                        }
    			                        _self.yAxis2 = yAxis;
    			                      }
    			                    }
    			                  }		
    					//后续
    					let LineA={
    						categories: _self.tempAxis,
    						series:[{
    						"name": "井口油压",
    						"data": _self.yAxis1,
    						},{
    						"name": "井口套压",
    						"data": _self.yAxis2,
    						},{
    						"name": "阀后压力",
    						"data": _self.yAxis3,
    						},]	
    					};
    					_self.drawCharts2("GtopTvWEDzCUFFxvJGzjGbIFZLFiIjFI",LineA);
    					_self.loadingA=false;
    				},
    			});	
    			
    		}
    	});
    	
    	
    },
    drawCharts2(id,data){
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "line",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        background: "#FFFFFF",
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: false,//是否显示图表区域内数据点上方的数据文案
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: true,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10
        },
        xAxis: {
          disableGrid: true,
          disabled: true,
          axisLine: true,
          axisLineColor: "#CCCCCC",
          calibration: false,
          fontColor: "#666666",
          fontSize: 13,
          rotateLabel: false,
          rotateAngle: 45,
          itemCount: 5,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 0,
          gridEval: 4,
          scrollShow: false,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          formatter: ""
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              type: "value",
              position: "left",
              disabled: false,
              axisLine: true,
              axisLineColor: "#CCCCCC",
              calibration: false,
              fontColor: "#666666",
              fontSize: 13,
              textAlign: "right",
              title: "TTTT",
              titleFontSize: 11,
              titleOffsetY: 0,
              titleOffsetX: 0,
              titleFontColor: "#666666",
              min: null,
              max: null,
              tofix: 2,
              unit: "",
              formatter: ""
            },
            {
              type: "value",
              position: "right",
              disabled: false,
              axisLine: true,
              axisLineColor: "#CCCCCC",
              calibration: false,
              fontColor: "#666666",
              fontSize: 13,
              textAlign: "left",
              title: "RRR",
              titleFontSize: 13,
              titleOffsetY: 0,
              titleOffsetX: 0,
              titleFontColor: "#666666",
              min: 0,
              max: 150,
              tofix: 2,
              unit: "",
              formatter: ""
            }
          ]
        },
        extra: {
          line: {
            type: "curve",
            width: 2
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: true,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            fontColor: "#FFFFFF",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666"
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: []
          }
        }
      });
    },
    touchstart(e){
      uChartsInstance[e.target.id].scrollStart(e);
    },
    touchmove(e){
      uChartsInstance[e.target.id].scroll(e);
    },
    touchend(e){
      uChartsInstance[e.target.id].scrollEnd(e);
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

<style scoped>
  .charts{
    width: 750rpx;
    height: 500rpx;
  }
</style>